<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">我的投递</view>
		</view>
		<view class="main-content">
			<view class="filters">
				<view class="filter-chips">
					<view class="chip active">
						<view>全部</view>
						<view class="count">4</view>
					</view>
					<view class="chip">
						<view>进行中</view>
						<view class="count">2</view>
					</view>
					<view class="chip">
						<view>已完成</view>
						<view class="count">2</view>
					</view>
				</view>
			</view>
			<view class="applications">
				<view class="application-card" v-for="item in applicationList" :key="item.id">
					<view class="job-info">
						<view class="company-info">
							<view class="company-logo" :style="`--icon: url(${item.companyIcon});`"></view>
							<view class="company-meta">
								<view class="job-title">{{ item.jobTitle }}</view>
								<view class="company-name">{{ item.companyName }}</view>
							</view>
						</view>
						<view class="status interview">{{ item.status }}</view>
					</view>
					<view class="application-meta">
						<view class="meta-items">
							<view class="meta-item">
								<view>投递时间：{{ item.time }}</view>
							</view>
							<view class="meta-item">
								<view>更新时间：{{ item.updateTime }}</view>
							</view>
						</view>
						<view class="progress">
							<view class="progress-step" :class="`${item.progress >= 1 ? 'active' : ''} ${item.progress == 1 ? 'current' : ''}`">
								<view class="step-dot"></view>
								<view class="step-text">已投递</view>
							</view>
							<view class="progress-step" :class="`${item.progress >= 2 ? 'active' : ''} ${item.progress == 2 ? 'current' : ''}`">
								<view class="step-dot"></view>
								<view class="step-text">简历筛选</view>
							</view>
							<view class="progress-step" :class="`${item.progress >= 3 ? 'active' : ''} ${item.progress == 3 ? 'current' : ''}`">
								<view class="step-dot"></view>
								<view class="step-text">面试中</view>
							</view>
							<view class="progress-step" :class="`${item.progress >= 4 ? 'active' : ''} ${item.progress == 4 ? 'current' : ''}`">
								<view class="step-dot"></view>
								<view class="step-text">Offer</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			applicationList: [
				{
					id: 1,
					jobTitle: '前端开发工程师',
					companyName: '字节跳动',
					companyIcon: '',
					status: '面试中',
					time: '2025-01-20 14:30',
					updateTime: '2025-01-21 10:00',
					progress: 3
				}, {
					id: 2,
					jobTitle: 'Java开发工程师',
					companyName: '阿里巴巴',
					companyIcon: '',
					status: '审核中',
					time: '2025-01-19 16:45',
					updateTime: '2025-01-20 09:30',
					progress: 2
				}, {
					id: 3,
					jobTitle: '产品经理',
					companyName: '腾讯',
					companyIcon: '',
					status: '不合适',
					time: '2025-01-18 11:20',
					updateTime: '2025-01-19 15:00',
					progress: 1
				}, {
					id: 4,
					jobTitle: 'UI设计师',
					companyName: '美团',
					companyIcon: '',
					status: '已录用',
					time: '2025-01-15 14:30',
					updateTime: '2025-01-18 16:30',
					progress: 4
				}
			]
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
	}
}
</script>

<style>
.main-content {
	padding: 0;
	background-color: #f5f5f5;
}

.filters {
    background-color: #f5f5f5;
    padding: 3vmin;
    margin-bottom: 5vmin;
}

.filters .filter-chips {
    display: flex;
    gap: 3vmin;
    overflow-x: auto;
    padding-bottom: 1vmin;
}

.filters .chip {
    display: inline-flex;
    align-items: center;
    gap: 1.5vmin;
    padding: 2vmin 4vmin;
    border-radius: 5vmin;
    font-size: 3.5vmin;
    background: #fff;
    color: #666;
    border: none;
    white-space: nowrap;
}

.filters .chip.active {
    background: #07c160;
    color: #fff;
}

.applications {
	padding: 0 5vmin;
	padding-bottom: 10vmin;
    display: flex;
    flex-direction: column;
    gap: 4vmin;
}

.applications .application-card {
    background: #fff;
    border-radius: 3vmin;
    padding: 5vmin;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.applications .job-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5vmin;
}

.applications .company-info {
    display: flex;
    gap: 3vmin;
}

.company-logo {
	--size: 12vmin;
    width: var(--size);
    height: var(--size);
    border-radius: 2vmin;
	background-color: #acacac;
}

.company-meta {
    display: flex;
    flex-direction: column;
    gap: 1vmin;
}

.job-title {
    font-size: 4vmin;
    font-weight: 500;
    color: #333;
}

.company-name {
    font-size: 3.5vmin;
    color: #666;
}

.status {
    padding: 1vmin 3vmin;
    border-radius: 3vmin;
    font-size: 3vmin;
    font-weight: 500;
}

.application-meta {
    display: flex;
    flex-direction: column;
    gap: 4vmin;
}

.meta-items {
    display: flex;
	flex-direction: column;
    gap: 2vmin;
    color: #666;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
    font-size: 3.5vmin;
}

.progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 4vmin 0;
}

.progress:before {
    content: "";
    position: absolute;
    top: 6vmin;
    left: 3vmin;
    right: 3vmin;
    height: 0.5vmin;
    background: #f0f0f0;
}

.progress-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vmin;
    flex: 1;
}

.progress-step.current .step-dot {
    transform: scale(1.2);
    box-shadow: 0 0 0 1vmin #07c1601a;
}

.progress-step.active .step-dot {
    background: #07c160;
}

.step-dot {
	--size: 3vmin;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #f0f0f0;
    border: 0.5vmin solid white;
    z-index: 1;
    transition: all .3s ease;
}

.progress-step.active .step-text {
    color: #07c160;
}

.step-text {
    font-size: 3vmin;
    color: #999;
    transition: color .3s ease;
}
</style>
